<template>
  <el-dialog
    title="角色权限"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
    append-to-body
  >
    <div style="text-align: center">
      <div>
        <el-tree
          show-checkbox
          :data="data"
          :props="defaultProps"
          :default-checked-keys="defaultList"
          ref="tree"
          node-key="id"
        ></el-tree>
        <div class="buttons">
          <el-button @click="calcel"><span>取消</span></el-button>
          <el-button @click="getCheckedKeys" type="primary"
            ><span class="perssionsubmit">确认</span></el-button
          >
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import apitree from "@/api/treemenu";
import roleapi from "@/api/role";
export default {
  components: {},
  props: [],
  data() {
    return {
      defaultList: [],
      data: [
        // {
        //   id: "1",
        //   parentId: "-1",
        //   label: "父级",
        //   children: [
        //     {
        //       id: "2",
        //       parentId: "1",
        //       lable: "子级",
        //       children: [
        //         {
        //           id: "3",
        //           parentId: "2",
        //           lable: "孙子级",
        //           children: [],
        //         },
        //       ],
        //     },
        //   ],
        // },
      ],
      dialogVisible: false,
      defaultProps: {
        children: "children",
        label: "menuName",
      },
      roleId: undefined,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.gettreemenu();

    // this.getRoleMenu();
  },
  mounted() {},
  methods: {
    init(id) {
      this.defaultList = [];
      // console.log("id", id);
      this.roleId = id;
      // console.log("perssion", id);
      this.dialogVisible = true;
      //初始化左侧数据和右侧数据
      // 测试  管理员拥有系统管理权限
      apitree.getRoleMenu(this.roleId).then((res) => {
        console.log("角色拥有菜单", res);
        var pessData = res;
        pessData.map((item) => {
          this.defaultList.push(item.id);
        });
        //this.defaultList = res;

        console.log("defaultList", this.defaultList);
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(this.defaultList);
        });
      });
    },
    gettreemenu() {
      apitree.getTreeList().then((res) => {
        console.log(res);
        this.data = res;
      });
      //   api.getTreeMenu().then((res) => {
      //     console.log(res);
      //     this.data = res;
      //   });
    },
    getCheckedKeys() {
      roleapi
        .submitPerssion(this.roleId, this.$refs.tree.getCheckedKeys())
        .then((res) => {
          console.log("submitperssion", res);
          if (res.state == "success") {
            this.dialogVisible = false;
            this.$message({ type: "success", message: res.message });
          } else {
            this.dialogVisible = false;
            this.$message({ type: "error", message: res.message });
          }
        });
      // console.log("key", this.$refs.tree.getCheckedKeys());
    },
    // getRoleMenu() {
    //   console.log(this.roleId);
    //   apitree.getRoleMenu(this.roleId).then((res) => {
    //     console.log("角色拥有菜单", res);
    //   });
    // },
    handleClose(done) {
      done();
    },
    calcel() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped>
.perssionsubmit {
  margin-left: auto;
  /* padding-left: 250px; */
  /* color:blue; */
  /* background-color: blue; */
}
.buttons {
  text-align: right;
}
</style>